<html>
<head>
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#227aef">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <base href=".">
  <title>klApp</title>
  <link rel="shortcut icon" href="icons/favicon.ico">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <style>
    .page {
      font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Ubuntu, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-size: 1rem;
      line-height: 1.625;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
    }

    .offline {
      background-color: rgba(48, 64, 84, 0.11);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 10000;
    }

    .offline .content {
      width: 100%;
      height: 100%;
    }

    .offline .content .title {
      background-image: url(images/offline-login-banner.jpg);
      background-size: cover;
      background-position-x: center;
      display: table;
      width: 100%;
      padding: 32px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      box-sizing: border-box;
    }

    .offline .content .title h1 {
      font-weight: 300;
      color: #fff;
      margin-top: 2em;
      margin-bottom: 44px;
    }

    .offline .content .message {
      padding: 32px;
      background-color: #fff;
      color: rgba(48, 64, 84, 0.91);
      flex: 1;
      box-sizing: border-box;
      height: 100%;
    }

    .offline .content .message h2 {
      margin-top: 0;
      margin-bottom: 16px;
    }

    @media (min-width: 1000px) {
      .offline .content {
        max-width: 700px;
        margin: auto;
        height: auto;
        box-shadow: 0 2px 5px 0 rgba(48, 64, 84, 0.11);
      }

      .offline .content .title {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }

      .offline .content .message {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        height: auto;
      }
    }
  </style>
</head>
<body class="page">
  <div class="offline">
    <div class="content">
      <div class="title">
        <h1>klApp</h1>
      </div>
      <div class="message">
        <h2>You are offline</h2>
        <div>
          klApp requires an internet connection to work. You do not seem to have access to the server right
          now. Check your internet connection and try reloading the page to use the application.
        </div>
      </div>
    </div>
  </div>

  <script>
    window.addEventListener('online',  function() {
      window.location.reload();
    });
  </script>
</body>
</html>
